<template>
	<view class="footer">
		<view class="fill-height">
			<view class="footer-btn el-flex">
				<image src="../../static/images/icon-home2.png" mode=""></image>
				<text>首页</text>
			</view>
			<view class="footer-btn el-flex">
				<image src="../../static/images/icon-service.png" mode=""></image>
				<text>客服</text>
			</view>
			<view class="footer-btn el-flex" @click="toCartPage">
				<image src="../../static/images/icon-cart2.png" mode=""></image>
				<text>购物车</text>
				<view class="bubble" v-if="total!==0">
					{{total}}
				</view>
			</view>
			<view class="action-box el-flex">
				<view class="buy-btn-group">
					<view class="btn buy-btn yellow" @click="openCart(false)">
						加入购物车
					</view>
					<view class="btn buy-btn orange" @click="openCart(true)">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "BottomItem",
		props: {
			total: {
				type: Number,
				default: 0
			}
		},
		methods: {
			openCart(falg) {
				this.$emit('openCart',falg)
			},
			toCartPage(){
				uni.navigateTo({
					url:'/pages/cart_page/cart_page'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		background: transparent;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 98;
		width: 7.2rem;
		margin: 0 auto;

		view {
			line-height: 1.15;
		}

		.fill-height {
			background-color: hsla(0, 0%, 100%, .96) !important;
			width: 100%;
			height: 0.96rem;
			border: 1px solid rgba(0, 0, 0, .1);
			overflow: hidden;
			display: flex;

			.footer-btn {
				text-align: center;
				flex-direction: column;
				position: relative;
				text-decoration: none;
				width: auto;
				padding: 0 0.1rem;
				color: rgba(0, 0, 0, .54);

				.bubble {
					position: absolute;
					width: 0.32rem;
					line-height: .32rem;
					height: 0.32rem;
					box-sizing: border-box;
					font-size: .13rem;
					overflow: hidden;
					text-align: center;
					border-radius: 0.32rem;
					background: linear-gradient(45deg, #ff7d00, #ff5934);
					color: #fff;
					top: 0.09rem;
					left: 50%;
					transform: translate3d(0.1rem, -20%, 0);
					font-style: normal;
				}

				&:first-child {
					padding-left: 0.2rem;
				}

				image {
					display: block;
					width: 0.64rem;
					height: 0.64rem;
				}

				text {
					position: relative;
					top: -0.05rem;
					color: rgba(0, 0, 0, .54);
					font-size: .2rem;
					font-family: MI-LANTING_GB-OUTSIDE-YS, MI-LANTING_GB-OUTSIDE;
				}
			}

			.action-box {
				margin-right: 0.32rem;
				margin-left: 0.1rem;
				text-align: right;
				flex: 1 1 auto;

				.buy-btn-group {
					width: 4rem;
					display: inline-flex;
					justify-items: center;
					border-radius: 0.4rem;
					overflow: hidden;

					.buy-btn {
						text-align: center;
						display: inline-block;
						width: 3.68rem;
						height: 0.72rem;
						line-height: .72rem;
						font-family: MI-LANTING--GBK1-Bold, MI-LANTING--GBK1;
						background: url(../../static/images/icon-buy-tc.png);
						background-size: 100% 100%;
						flex: 1;
						border-radius: 0;
						font-size: .28rem;
						color: #fff;
					}

					.yellow {
						background-image: linear-gradient(90deg, #fdcf00, #fd9b00) !important;
					}

					.orange {
						background-image: linear-gradient(90deg, #ff7310, #fe3f00) !important;
					}
				}
			}
		}
	}
</style>